<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./assets/d3-4.13.0.min.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="../build/g6.js"></script>
  <script src="../build/plugins.js"></script>
  <title>测试</title>
</head>

<body>
  <div id="mountNode"></div>
  <div id="minimap"></div>

  <style>
    /* 此处书写样式代码，支持 less scss */
    /* @import 'antd/dist/antd.css'; */
    .card-container {
      width: 170px;
      height: 74px;
      border: 1px solid #DBDBDB;
      border-radius: 4px;
      position: relative;
    }
    .card-container .main-text{
      text-align: center;
      margin: 12px 14px;
      padding-bottom: 8px;
      margin-bottom: 0px;
      font-size: 16px;
      border-bottom: 1px solid #DBDBDB;
    }
    .card-container p{
      font-size: 12px;
      margin: 8px;
    }
    .card-container .value-text{
      margin-left: 12px;
      text-align: left;
    }
    .card-container .percent-text{
      margin-right: 12px;
      float: right;
      color: red
    }
  </style>
  <script>
G6.registerGuide('tag', {
  draw(item) {
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const {nodeId, label} = model;
    const graph = item.getGraph();
    const node = graph.find(nodeId);
    const nodeBox = node.getBBox();
    const dy = 32;
    return group.addShape('path', {
          attrs: {
            path: [['M', nodeBox.centerX, nodeBox.minY - dy], ['L', nodeBox.centerX, nodeBox.minY]],
            stroke: 'red',
            lineDash: [2, 2],
            endArrow: true,
          },
        });;
  }
});
const data = {
  roots: [{
    id:'root1',
    label: 'root',
    children: [{
      label: 'child1',
      children: [
        {
          label: 'child\n1.1'
        }
      ]
    }, {
      label: 'child2'
    }] 
  }]
};
const graph = new G6.Tree({
  container: 'mountNode',
  width: 500,
  height: 500
});
graph.read(data);

graph.add('guide', {
  id:'gd',
  shape: 'tag',
  nodeId: 'root1',
  label: '这是 node1'
});
graph.focus('gd');
setTimeout(() => {
      graph.remove('gd');
    }, 2000);
  </script>
</body>
</html>

